﻿<template>

  <div class="collect">
      <div class="collect_header" ref="col_header">
        <img src="../../static/img/back_ccc.png" class="goback_col_header">
        <span class="collect_header_w">
          收藏夹
        </span>
      </div>
      <div class="sec_nav" ref="sec_nav">
        <div :class="{act:header_list[0].c}" v-on:click="show_click(0)">冒险卡</div>
        <div :class="{act:header_list[1].c}" v-on:click="show_click(1)">愿望</div>
        <div :class="{act:header_list[2].c}" v-on:click="show_click(2)">信物</div>
        <div :class="{act:header_list[3].c}" v-on:click="show_click(3)">图文语言</div>
      </div>
      <!-- main s-->
      <div class="main" ref="main">
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
          
          <!-- 冒险卡s -->
          <ul   v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10" class="load_more" v-show="true">
                <li class="load_m_box">
                  <!-- 卡片名s -->
                  <div class="load_m_box_header">
                    冒险卡
                  </div>
                  <!-- 卡片名e -->

                  <!-- card_img s -->
                  <img src="../../static/img/bg_all.png" class="img_limit">
                  <!-- card_img e -->

                  <!-- play_m s  -->
                  <div class="play_m">

                  </div>

                  <!-- play_m e -->
                  <!-- 问题s -->
                  <div class="wt_s">
                    我是谁，我在哪里，我到哪里去
                  </div>

                  <!-- 问题e -->
                </li>
                <li class="load_m_box">
              <!-- 卡片名s -->
              <div class="load_m_box_header">
                冒险卡
              </div>
              <!-- 卡片名e -->
              <!-- card_img s -->
              <img src="../../static/img/bg_all.png" class="img_limit">
              <!-- card_img e -->
              <!-- play_m s  -->
              <div class="play_m">
              </div>
              <!-- play_m e -->
              <!-- 问题s -->
              <div class="wt_s">
                我是谁，我在哪里，我到哪里去
              </div>
              <!-- 问题e -->
            </li>
          </ul>
          <!-- 冒险卡e -->

          <!-- 愿望s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="load_more_wish" v-show="false">
            <!--  -->
              <li class="wish_wrapper">
                <div class="wish_header">
                  标题
                </div>
                <div class="main_wish">
                  <div class="mian_wish_w">
                    哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇
                    哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇
                    哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇 哇
                  </div>
                  <img src="../../static/img/bg_all.png" class="main_wisht_pnbg">
                </div>
                <div class="main_wish_bottom">
                  <span style="padding-left:9vw">时间 2017.9.8-18:00</span> 
                  <span style="padding-right:9vw;">报名人数500</span>
                </div>
              </li>
          </ul>
          <!-- 愿望e -->

          <!-- 信物s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="token_slider" v-show="false">
            <!--  -->
            <li class="token_wrapper">
              <img src="../../static/img/bg_all.png" class="token_wrapper_img">
              <p class="token_title">
                复活明信片
              </p>
              <p class="token_introduce">
                ffffffffffffffffffffffffffffffffffi比方说的jfk数据分类是
                ffffffffffffffffffffffffffffffffffi比方说的jfk数据分类是
              </p>
              <div class="token_bottom">
                <img src="../../static/img/bg_all.png" class="token_bottom_user_img"/>
                <span class="user_name">
                  用户名
                </span>
              </div>
            </li>
          </ul>
          <!-- 信物e -->

          <!-- 图文语音s -->
          <ul v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" class="load_more_wish" v-show="true">
            <!--  -->
            <li class="img_wrapper">
                <img src="../../static/img/bg_all.png" class="bg_all">
                <div class="wrapper_voice">
                  <img src="../../static/img/play_voice.png" alt="Alternate Text" class="play_voice"/>
                </div>
            </li>

            <li class="img_wrapper">
              <img src="../../static/img/bg_all.png" class="bg_all">
              <div class="wrapper_voice mb_box">
                <div class="wrapper_voice_mb_box"> 
                 
                </div>
              </div>
            </li>
          </ul>
          <!-- 图文语言e -->
          <div v-show="loading" class="loading_show">加载中。。。。。</div>
          <div v-show="!loading" class="loading_hide">没有更多数据了</div>
        </mt-loadmore>
      </div>
      <!-- main e -->
  </div>

</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { InfiniteScroll  } from 'mint-ui';
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import axios from 'axios'
  import filter from "../filter/filter.js"
  import "../../static/css/Adventure/user_index_ad.css"
  import FooterMenu from "../index/FooterMenu.vue";
  import "../../static/js/use_rem.js";
  import "../../static/css/mint-ui/style.css"
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  import common from "../common/common.js"
  Vue.prototype.$http = axios
  Vue.use(VueScroller);
  Vue.use(MintUI);
  Vue.use(InfiniteScroll);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: false,
        ad_visit:true,
        other_data: "",//scroll other_data
        cover_native_nav_show: false,
        hsl_bg: "",
        set_user_info: false,
        header_list: [{ c: true }, { c: false }, { c: false }, { c: false }],
        list: [{ item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }, { item: 1 }],
        allLoaded: false,
        loading:false
      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {
   
    },
    methods: {
      loadMore:function(){
        this.loading = true;
        //Indicator.open();
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
          //Indicator.clase();
        }, 2500);
      },
      show_click: function (x) {
        for (let x = 0; x < this.header_list.length; x++){
          this.header_list[x].c = false;
        }
        this.header_list[x].c = true 
      },
      loadTop() {
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        this.allLoaded = true;// 若数据已全部获取完毕
        this.$refs.loadmore.onBottomLoaded();
     }
    },
    components: {
     
    },
    mounted: function () {
      let col_header = window.getComputedStyle(this.$refs.col_header,"height").height.replace("px","");
      let header_h = window.getComputedStyle(this.$refs.sec_nav, "height").height.replace("px","");
      let main_h = document.body.clientHeight;
      this.$refs.main.style.height = main_h - parseInt(col_header) - parseInt(header_h) + "px";
    },
 
  }
</script>

<style scoped>
  /*loading_show*/
  .wrapper_voice_mb_box{
    width:21.3vw;
    height:21.3vw;
    background-color:#fff;
  } 
  .mb_box {
    width: 65.5vw;
    display: flex;
    justify-content: space-between;
  } 
  .bg_all {
    vertical-align:top;
    display: inline-block;
    border-radius: 2vw;
  } 
  .wrapper_voice {
    display: inline-block;
  } 
  .play_voice {
    width: 55.7vw;
    padding-left:3vw;
  } 
  .bg_all {
    width: 9.8vw;
    height: 9.8vw;
  }
  .img_wrapper {
    margin-top:2.6vw;
    background-color: #9f5c2f;
    width: 89%;
    margin: 2vw auto;
    box-shadow: 2px 2px 4px 2px #80808082;
    padding-top: 1.6vw;
    padding-bottom: 1.6vw;
    border-radius: 2vw;
  } 
  .user_name {
    color: #a8704f;
    font-size: 4.5vw;
    font-weight: bold;
    vertical-align: middle;
  } 
  .token_bottom_user_img {
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 1vw;
    border: 1px solid #9f5c2f;
    vertical-align: middle;
  } 
  .token_title {
    letter-spacing:1px;
    font-size: 4vw;
    color: #000;
    text-align: left;
    padding-left: 8vw;
    margin-bottom: 2vw;
    text-overflow: ellipsis;
    font-weight: bold;
    padding-left: 4.2vw;
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
  .token_introduce {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #646464;
    font-size: 3.5vw;
    padding-left:4vw;
  } 
  .token_wrapper_img {
    width: 41.8vw;
    height: 27vw;
  } 
  .token_slider {
    display: flex;
    justify-content: space-around;
  }
  .token_wrapper {
    height: 53.8vw;
    width: 41.8vw;
    background-color: #fff;
    border-radius: 2vw;
    box-shadow: 1px 1px 4px 2px #6460605c;
    margin-top: 4.8vw;
  } 
  .main_wish_bottom {
    display: flex;
    justify-content: space-between;
    font-size: 3vw;
    color: #9c5c30;
    height: 8.3vw;
    line-height: 8.3vw;
    background-color: #fff;
    border-radius: 0 0 4vw 4vw;
  } 
  .main_wisht_pnbg {
    height: 39vw;
    border-radius: 2vw;
    box-shadow: 1px 1px 4px 2px #808080;
    width: 85vw;
    margin-top: 2vw;
  } 
  .mian_wish_w {
    font-size: 3.5vw;
    color: #fff;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 4.2vw;
    padding-right: 4.2vw;
    line-height:5vw;
  } 
  .load_more_wish {
    margin: 2.4vw auto 0;
  }
  .main_wish {
    height: 54.4vw;
    background-color: #dea675;

  } 
  .wish_header {
    height: 8vw;
    line-height: 8vw;
    font-size: 4vw;
    text-align: center;
    color: #fff;
    width: 100%;
    border-radius: 2vw 2vw 0 0;
    background-color: #9f5c2f;
  } 
  .wish_wrapper {
    height: 71vw;
    width: 89vw;
    border-radius: 4vw;
    margin:0 auto;
    box-shadow:1px 1px 4px 2px #808080 ;
  } 
  .wt_s {
    height: 8vw;
    padding-bottom: 2vw;
    padding-top: 2vw;
    color: #853100;
    font-size: 2vw;
  } 
  .play_m {
    height: 4.8vw;
    line-height: 4.8vw;
    border-bottom: 1px solid #853100;
  } 
  .load_m_box_header {
    color: #853100;
    font-size: 3vw;
    margin-bottom: 1vw;
    margin-top: 1vw;
  }
  .img_limit {
    border: 1px solid #a8581e;
    height: 38.5vw;
    width: 37.3vw;
  } 
  .load_m_box {
    width: 44.8vw;
    height: 62.5vw;
    border-radius: 2vw;
    border: 1px solid #a44418;
    margin-top: 2.6vw;
    background-color:#fff;
  } 
  .load_more {
    display: flex;
    justify-content:space-around;
  } 
  .loading_show {
    height: 10vw;
    line-height: 10vw;
    margin-bottom: 5vw;
    margin-top: 5vw;
  }
  /*loading_show*/
  /*main s*/
  .main {
    background-color: #eeeeee;
    overflow: scroll;
  }  


  /*main e*/
  .sec_nav .act {
    color: #a05c2e;
  }
  .sec_nav{
    display:flex;
    width:100%;
    height:9.3vw;
    line-height:9.3vw;
    font-size:3.7vw;
    justify-content:space-around;
  } 
  .goback_col_header {
    width: 6.2vw;
    height: 6.8vw;
    vertical-align: middle;
    padding-left: 2.6vw;
  } 
  .collect_header_w {
    padding-left: 8vw;
  } 
  .collect_header {
    height: 11.7vw;
    line-height: 11.7vw;
    font-size: 4.2vw;
    color: #ffffff;
    background-color: #9f5c2f;
    text-align:left;
  }
</style>